<template>
	<view>
		<view class="box">
			<view class="item" v-for="(item,index) in cellList" :key="index" @click="cellClick(item)">
				<view class="left">
					<image :src="item.icon" mode=""></image>
					<view>{{item.name}}</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="item" v-for="(item,index) in cellList1" :key="index" @click="cellClick(item)">
				<view class="left">
					<image :src="item.icon" mode=""></image>
					<view>{{item.name}}</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="bottom under-bottom">
			<div @click="handleLogout()" class="btn ">
				退出登录
			</div>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import imgs from '@/utils/imgs.js'
	import store from '@/store'
	const cellList = ref([{
			icon: imgs.setting.s1,
			name: '个人信息',
			path: '/pages/user/personal/index'
		},
		{
			icon: imgs.setting.s2,
			name: '地址管理',
			path: '/pages/address/index'
		},
	])
	const cellList1 = ref([
		// {
		// 	icon: imgs.setting.s3,
		// 	name: '账户与安全',
		// 	path: '/pages/user/bind/index'
		// },
		{
			icon: imgs.setting.s4,
			name: '功能反馈',
			path: '/pageA/feedback/feedback'
		},
		{
			icon: imgs.setting.s5,
			name: '清理缓存',
			path: 'clear'
		},
		{
			icon: imgs.setting.s6,
			name: '关于我们',
			path: '/pageA/about-us/about-us'
		},
		{
			icon: imgs.setting.s6,
			name: '隐私政策',
			path: '/pageA/web/web?type=1'
		},
		{
			icon: imgs.setting.s6,
			name: '用户协议',
			path: '/pageA/web/web?type=2'
		},
	])
	// 退出登录
	const handleLogout = () => {
		uni.showModal({
			title: '友情提示',
			content: '您确定要退出登录吗?',
			success(res) {
				if (res.confirm) {
					store.dispatch('Logout', {})
						.then(result => {
							uni.showToast({
								icon:'none',
								title:'退出成功'
							})
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/user/index',
								})
							},1500)
							
						})
				}
			}
		})
	}
	const showAsk = ()=>{
		uni.showModal({
			title:'温馨提示',
			content:'您确定清理缓存吗?',
			success:({confirm})=> {
				if(confirm){
					uni.showToast({
						icon:'loading',
						title:'正在清理',
						duration:2500
					})
					setTimeout(()=>{
						uni.showToast({
							icon:'success',
							title:'清理成功',
						})
					},2500)
				}
			}
		})
	}
	const cellClick = (item) => {
		if(item.path=='clear'){
			showAsk()
			return
		}
		if(!item.path){
			return
		}
		uni.navigateTo({
			url:item.path,
			fail(e) {
				console.log(e,'ccccccccccc');
			}
		})
	}
	onShow(() => {

	})
</script>

<style lang="scss">
	page {
		background-color: #F5F4F3;
		height: 100%;
	}

	.bottom {
		position: fixed;
		width: 100vw;
		bottom: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 598rpx;
			height: 88rpx;
			background: #FF8C19;
			border-radius: 45rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;

		}
	}

	.box {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;

		.item {
			padding: 32rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				>image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 10rpx;
				}

				>view {
					font-size: 28rpx;
					color: #333130;
				}
			}

			.right {}
		}
	}
</style>